{% include 'include/head.html' %}
<!-- Page Container START -->
            <div class="page-container">
                <!-- Content Wrapper START -->
                <div class="main-content">
                    <div class="page-header">
                        <h2 class="header-title">查看套餐</h2>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h4>套餐明细</h4>
                            <div class="m-t-25">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-row">
                                            <div class="form-group m-b-15 col-md-6">
                                                <label>套餐名</label>
                                                <input type="text" class="form-control" placeholder="套餐名" id="name" value="{{ name }}" disabled="true">
                                            </div>
                                            <div class="form-group m-b-15 col-md-6">
                                                <label>套餐价格</label>
                                                <input type="text" class="form-control" placeholder="套餐价格" id="price" value="{{ price }}" disabled="true">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-t-25">
                                <table id="table" class="table">
                                    <thead>
                                        <tr>
                                            <th>款号</th>
                                            <th>数量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in packagelist %}
                                            <tr>
                                                <td>{{ item.sku }}</td>
                                                <td>{{ item.num }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>款号</th>
                                            <th>数量</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Wrapper END -->
                {% csrf_token %}
                <!-- Footer START -->
                <footer class="footer">
                    <div class="footer-content">
                        <p class="m-b-0">Copyright © 2019 Theme_Nate. All rights reserved.</p>
                        <span>
                            <a href="" class="text-gray m-r-15">Term &amp; Conditions</a>
                            <a href="" class="text-gray">Privacy &amp; Policy</a>
                        </span>
                    </div>
                </footer>
                <!-- Footer END -->

            </div>
            <!-- Page Container END -->

        </div>
    </div>


    <!-- Core Vendors JS -->
    <script src="/static/assets/js/vendors.min.js"></script>

    <!-- page js -->
    <script src="/static/assets/vendors/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/assets/vendors/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/static/assets/js/pages/datatables.js"></script>
    <script src="/static/assets/vendors/select2/select2.min.js"></script>
    <script src="/static/excel/xlsx.core.min.js"></script>
    <script src="/static/assets/js/jquery.tabletojson.min.js"></script>
    <!-- Core JS -->
    <script src="/static/assets/js/app.min.js"></script>
    <script>
        $(document).ready(
            $("#sn").keydown(function(event) {
                if (event.keyCode == 13) {
                    $.import($("#sn").val());
                }
            })
        );
        function removeSelf(_this){
            var that = $(_this).parent('td').parent('tr');
            that.remove();
            num = parseInt($("#totle").text());
            $("#totle").text(num-1)
        }
        jQuery.extend({
            'import':function(sn){
                let num;
                if (sn != "") {
                    let ht = "";
                    ht += '<tr>';
                    ht += '<td class="no">' + sn + '</td>';
                    ht += '<td class="num">1</td>';
                    ht += '<td><button class="btn btn-danger btn-xs" onclick="removeSelf(this)">删除</button></td>';
                    ht += '</tr>'
                    $("#table").append(ht);
                    $("#sn").val("");
                    num = parseInt($("#totle").text());
                    $("#totle").text(num + 1)
                }
            }
        })
    </script>


    <script>
        $(function() {
            $("#save").click(function(){
                var table = $('#table').tableToJSON(); // Convert the table into a javascript object
                console.log(table);
                var list = JSON.stringify(table);
                var name = $('#name').val();
                var price = $('#price').val();
                var csrf = $('[name="csrfmiddlewaretoken"]').val();
                //alert(fields);
                $.ajax({
                type: "POST",
                data: {data : list,name : name,price : price,csrfmiddlewaretoken:csrf},
                dataType: "json",
                success:function (message) {
                    alert(message.re);
                },
                error:function (message) {
                    alert("提交失败"+message);
                }
                });
            });
        });
    </script>
</body>

</html>